<div>
  <!-- 搜索区域 -->
  <form>
    <div class="row">
      <div class="col-1">
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">添加</button>
      </div>
      <div class="col-2">
        <input type="text" class="form-control" placeholder="请输入用户名">
      </div>
      <div class="col-2">
        <select id="inputState" class="form-control">
          <option disabled selected hidden>请选择角色</option>
          <option>...</option>
        </select>
      </div>
      <span>搜索</span>
    </div>
  </form>
  <!-- 模态框区域 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">新增</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input name="gender" class="male" type="radio" value="male" checked> 男
          <input name="gender" class="female" type="radio" value="female"> 女
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary saveUpdateHandler">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 表格区域 -->
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">用户名</th>
        <th scope="col">姓名</th>
        <th scope="col">角色</th>
        <th scope="col">性别</th>
        <th scope="col">状态</th>
        <th scope="col">手机号</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
  <div id="myPage" class="demo"></div>
</div>

<style>
  .demo {
    float: right;
  }
  .table {
    color: #606266;
  }
  a:hover {
    color: #606266;
  }
  form {
    margin-bottom: 1em;
  }
  form span {
    line-height: 30px;
  }
</style>
<script>
  var baseUrl = "http://39.96.21.48:7788";
  // 获取token
  $.ajaxSetup({
    headers: {
      "Authorization":localStorage.getItem("token")
    }
  })

  $(".saveUpdateHandler").on("click",function() {
    // $(this).attr("checked",true);
    var val = $('input[name="gender"]:checked').val()
    // var val = $('input[name="gender"]:checked').val()
    console.log(val)
    // var gender = 
    // console.log(gender)
  })
  // 分页查询
  function queryFindUser(page) {
    var obj = {
      page:page,
      pageSize:5
    }
    $.get(baseUrl+"/baseUser/pageQuery",obj,function(res) {
      // console.log(res)
      $("tbody").empty()
      res.data.list.forEach(function(item) {
        if(item.roles[0] == null) {
          item.roles[0] = {}
          item.roles[0].name = '暂无'
        }
        // 将获取数据追加到tbody中
        $(`
          <tr>
            <td><input type="checkbox" value=`+item.id+`></td>
            <td>`+item.username+`</td>
            <td>`+item.realname+`</td>
            <td>`+item.roles[0].name+`</td>
            <td>`+item.gender+`</td>
            <td>`+item.status+`</td>
            <td>`+item.telephone+`</td>
            <td>
              <a href="#">设置</a>
              <a href="#">移除</a>
              <a href="#">详情</a>
              <a href="#">修改</a>
            </td>
          </tr>
        `).appendTo($("tbody"))
      })
      $("#myPage").sPage({
        page:res.data.page,
        pageSize:res.data.pageSize,
        total:res.data.total,
        prevPage:"<<",
        nextPage:">>",
        backFun:function(page){
          queryFindUser(page)
        }
      });
    })
  }
  queryFindUser(1)




</script>

